<script setup>
  import { reactive } from 'vue'
  window.onload = function () {
    var preloader = document.getElementById('preloader')
    preloader.style.display = 'block'
  }

  const tickToggle = reactive({ val: 1 })
  function tick() {
    tickToggle.val = 0
  }

  setTimeout(tick, 500)
</script>

<template>
  <div v-if="tickToggle.val" id="preloader">
    <div class="sm:spinner spinnerTel"></div>
  </div>
</template>

<style>
  #preloader {
    position: absolute;
    display: block;
    height: 80vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
  }
  .spinner {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top-color: #845cee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  .spinnerTel {
    box-sizing: border-box;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top-color: #845cee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
